<template>
  <div class="table-row" :class="{'items-center':itemsCenter}">
    <p class="label"><span v-if="must">*</span>{{ label }}</p>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script>
export default {
  name: "table-row",
  props: {
    label: String,
    must: Boolean,
    itemsCenter: Boolean
  }
}
</script>

<style lang="less" scoped>
.table-row{
  display: flex;
  margin: 20px 0;
}
.label {
  width: 120px;
  flex-shrink: 0;
  text-align: right;
  margin-right: 20px;
  span{
    color: red;
  }
}
.items-center{
  align-items: center;
}
</style>